{* コンテンツ *}
{literal}
<style type="text/css">
    /* Clear calendar's float */
    #container .bd:after {content:".";display:block;clear:left;height:0;visibility:hidden;}

    /* Have calendar squeeze upto bd bounding box */
    #container .bd {padding:0;}

    /* Remove calendar's border and set padding in ems instead of px, so we can specify an width in ems for the container */
    #cal {border:none;padding:1em}

    .datefield input,
    .datefield button,
    .datefield label  {vertical-align:middle}

    .datefield label  {font-weight:bold}
    .datefield input  {width:15em}
    .datefield button  {padding:0 5px 0 5px; margin-left:2px;}
    .datefield button img {padding:0;margin:0;vertical-align:middle}


    /* Example box */
    .box {
	position:relative;
	height:30em;
    }
</style>


<script type="text/javascript">
    YAHOO.util.Event.onDOMReady(function(){

        var dialog, calendar;

        calendar = new YAHOO.widget.Calendar("cal", {
            iframe:false,          // Turn iframe off, since container has iframe support.
            hide_blank_weeks:true  // Enable, to demonstrate how we handle changing height, using changeContent
        });

		// Correct formats for Japan: yyyy/mm/dd, mm/dd, yyyy/mm
		calendar.cfg.setProperty("MDY_YEAR_POSITION", 1);
		calendar.cfg.setProperty("MDY_MONTH_POSITION", 2);
		calendar.cfg.setProperty("MDY_DAY_POSITION", 3);

		calendar.cfg.setProperty("MY_YEAR_POSITION", 1);
		calendar.cfg.setProperty("MY_MONTH_POSITION", 2);

		// Date labels for Japanese locale
		calendar.cfg.setProperty("MONTHS_SHORT",   ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708","7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"]);
		calendar.cfg.setProperty("MONTHS_LONG",    ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708","7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"]);
		calendar.cfg.setProperty("WEEKDAYS_1CHAR", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
		calendar.cfg.setProperty("WEEKDAYS_SHORT", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
		calendar.cfg.setProperty("WEEKDAYS_MEDIUM",["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
		calendar.cfg.setProperty("WEEKDAYS_LONG",  ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);

		// Month/Year label format for Japan
        calendar.cfg.setProperty("MY_LABEL_YEAR_POSITION",  1);
        calendar.cfg.setProperty("MY_LABEL_MONTH_POSITION",  2);
        calendar.cfg.setProperty("MY_LABEL_YEAR_SUFFIX",  "\u5E74");
        calendar.cfg.setProperty("MY_LABEL_MONTH_SUFFIX",  "");

        function okHandler() {
            if (calendar.getSelectedDates().length > 0) {

                var selDate = calendar.getSelectedDates()[0];

                // Pretty Date Output, using Calendar's Locale values: Friday, 8 February 2008
                //var wStr = calendar.cfg.getProperty("WEEKDAYS_LONG")[selDate.getDay()];
                var dStr = selDate.getDate();
                var mStr = selDate.getMonth() + 1;
                var yStr = selDate.getFullYear();

                YAHOO.util.Dom.get("public_time").value = yStr + "-" + mStr + "-" + dStr ;
            } else {
                YAHOO.util.Dom.get("public_time").value = "";
            }
            this.hide();
        }
        
        function cancelHandler() {
            this.hide();
        }

        dialog = new YAHOO.widget.Dialog("container", {
            context:["show", "tl", "bl"],
            buttons:[ {text:"Select", isDefault:true, handler: okHandler}, 
                      {text:"Cancel", handler: cancelHandler}],
            width:"16em",  // Sam Skin dialog needs to have a width defined (7*2em + 2*1em = 16em).
            draggable:false,
            close:true
        });
        calendar.render();
        dialog.render();

        // Using dialog.hide() instead of visible:false is a workaround for an IE6/7 container known issue with border-collapse:collapse.
        dialog.hide();

        calendar.renderEvent.subscribe(function() {
            // Tell Dialog it's contents have changed, Currently used by container for IE6/Safari2 to sync underlay size
            dialog.fireEvent("changeContent");
        });

        YAHOO.util.Event.on("show", "click", function() {
            dialog.show();
            if (YAHOO.env.ua.opera && document.documentElement) {
                // Opera needs to force a repaint
                document.documentElement.className += "";
            } 
        });
    });
</script>

{/literal}

	<h2>FAQ追加変更</h2>
    <p>
        {$form.javascript} {$form.header.main}<br />
        {$form.errors|@qferror}
    </p>
    <form {$form.attributes}>
        {$form.hidden} {$form.question.error}{$form.question.label}<br />
        {$form.question.html}<br />
        {$form.answer.error}{$form.answer.label}<br />
        {$form.answer.html}<br />
        {$form.public_time.error}{$form.public_time.label}<br />
		<div class="datefield">
        <label for="date">{$form.public_time.html}</label>
		<button type="button" id="show" title="Show Calendar" >
			カレンダー
		</button>
		</div>
    	<div id="container">
	    	<div class="hd">Calendar</div>
	    	<div class="bd">
	        	<div id="cal"></div>
	   		</div>
	    </div>
        {$form.requirednote}<br />
        <br />
        {$form.reset.html}{$form._submit.html}<br />
    </form>

{* /コンテンツ *}